<template>
  <div class="right-slider" id="right-slider">
    <!-- 特殊部分处理 -->
    <div
      class="right-slider-special"
      v-if="
        RightHooks.rightHooksData.findingVisible ||
        RightHooks.rightHooksData.diagnosisVisible ||
        RightHooks.rightHooksData.rejectFilmVisible ||
        RightHooks.rightHooksData.yayVisible
      "
    >
      <!-- 废片模块 -->
      <div
        v-if="RightHooks.rightHooksData.rejectFilmVisible"
        class="right-slider-special-film"
      >
        <div class="right-slider-special-title reject-title">当前序列被标为废片</div>
        <div class="right-slider-special-text reject-content">
          原因：{{ RightHooks.rightHooksData.rejectFilmValue ?? "" }}
        </div>
      </div>
      <!-- 阴阳性 -->
      <div v-if="RightHooks.rightHooksData.yayVisible" class="right-slider-special-item">
        <div class="right-slider-special-title reject-title">
          当前序列被标为{{ RightHooks.rightHooksData.yayValue === 2 ? "阳性" : "阴性" }}
        </div>
      </div>
      <!-- 检查所见模块 -->
      <div
        v-if="RightHooks.rightHooksData.findingVisible"
        class="right-slider-special-item"
      >
        <div class="right-slider-special-title">检查所见：</div>
        <div class="right-slider-special-text">
          {{ RightHooks.rightHooksData.findingValue ?? "" }}
        </div>
      </div>
      <!-- 诊断所得模块 -->
      <div
        v-if="RightHooks.rightHooksData.diagnosisVisible"
        class="right-slider-special-item"
        :style="{ marginTop: RightHooks.rightHooksData.findingVisible ? '16px' : '0px' }"
      >
        <div class="right-slider-special-title">诊断所得：</div>
        <div class="right-slider-special-text">
          {{ RightHooks.rightHooksData.diagnosisValue ?? "" }}
        </div>
      </div>
    </div>
    <component
      :is="currentId === '' ? SequenceSign : LabelingSigns"
      v-bind="reactive({ ...$attrs, ...props, formTitle: titleVal })"
    ></component>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from "vue";
// 标注征象处理（小征象）
import LabelingSigns from "./components/LabelingSigns.vue";
// 序列征象处理（大征象）
import SequenceSign from "./components/SequenceSign.vue";

interface Prop {
  disabled: boolean;
  currentId: string;
  options: Right.FormOptions[];
  form: { [x: string | number]: any };
  RightHooks: Right.RightHooks;
  formRef: any;
  isFrame: boolean;
  handleChange: (
    value:
      | string
      | number
      | boolean
      | (string | number | boolean)[]
      | Record<string, any>
      | (
          | string
          | number
          | Record<string, any>
          | (string | number | Record<string, any>)[]
        )[]
      | undefined,
    item: Right.FormOptions
  ) => void;
}
const props = defineProps<Prop>();
const titleVal = computed(() => {
  if (props.isFrame) {
    return "序列征象";
  } else {
    return props.currentId === "" ? "序列征象" : "标注征象";
  }
  // return props.currentId === "" && !props.isFrame ? "序列征象" : "标注征象";
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
